<template>
    <div>
        <navigationBar navigationTitle="首页" />
        <!-- <navigationBar :backType="2" navigationTitle="首页" /> -->

        <view class="wrap paddingBottom">
            <view class="banner">
                <banner :bannerList="bannerList" />
            </view>

            <view class="authen-bg">
                <authenInfo :showType="1" />
            </view>

            <view class="wrap-list">
                <headLine title="推荐项目" />

                <projectList :list="list" @onChoose="onChoose" />
            </view>
        </view>

        <view class="mark" v-if="showCoupon" @click="onClose"></view>
        <view class="coupon" v-if="showCoupon && couponList.length">
            <view class="coupons">
                <view
                    class="item flex align-center"
                    v-for="item in couponList"
                    :key="item.id"
                >
                    <view class="left">
                        <view class="price"> {{ item.money }} </view>
                    </view>
                    <view class="center flex column just-between">
                        <view class="title"> {{ item.name }} </view>
                        <view class="sub">
                            {{
                                item.type == 1
                                    ? "无门槛"
                                    : "满 " +
                                      item.limit_money +
                                      " 减 " +
                                      item.money
                            }}
                        </view>
                        <view class="time" v-if="item.use_type == 0">
                            有效期至 {{ item.endtime_text }}
                        </view>
                        <view class="time" v-else>
                            领取后 {{item.day}} 天过期
                        </view>
                    </view>
                    <view
                        class="right flex align-center column"
                        @click="onReceive(item)"
                    >
                        <view class="btn"> 立即 </view>
                        <view class="btn"> 领取 </view>
                    </view>
                </view>

                <emptyData
                    v-if="couponList.length == 0"
                    :text="'暂无优惠券'"
                ></emptyData>
            </view>
            <view class="close" @click="onClose">
                <image
                    class="img"
                    src="/static/static/technician/joinUs/close.png"
                    mode="scaleToFill"
                />
            </view>
        </view>

        <view class="showToast" v-if="showToast">
            <view class="toast">{{ showToastText }}</view>
        </view>

        <!-- <tabBar :current="0" /> -->
    </div>
</template>

<script>
import tabBar from "@/subPages/components/technician/tabBar/tabBar.vue";
import banner from "@/subPages/components/technician/banner/banner.vue";
import authenInfo from "@/subPages/components/technician/authenInfo/authenInfo.vue";
import headLine from "@/subPages/components/technician/headLine/headLine.vue";
import projectList from "@/subPages/components/technician/projectList/projectList.vue";
import { serviceIndex } from "@/API/API/technician.js";
import { couponLists, receiveCoupon } from "@/API/API/recruit.js";
import emptyData from "@/components/components/emptyData/emptyData.vue";

export default {
    components: {
        tabBar,
        banner,
        authenInfo,
        headLine,
        projectList,
        emptyData,
    },
    data() {
        return {
            bannerList: [],

            page: 1,
            total: 0,
            list: [],
            showCoupon: false,

            couponList: [],

            showToast: false,
        };
    },
    onLoad() {
        if (this.$filters.isLogin()) {
            this.getData();
        }
        uni.removeStorageSync("dealer_id");
    },
    onPullDownRefresh() {
        this.onRefresh();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.page++;
            this.getData();
        }
    },

    watch: {
        showToast: {
            handler(newVal) {
                if (newVal) {
                    setTimeout(() => {
                        this.showToast = false;
                    }, 1500);
                }
            },
        },
    },

    methods: {
        getCouponList() {
            couponLists()
                .then((res) => {
                    this.couponList = res.data.data;
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
        onClose() {
            this.showCoupon = false;
            uni.setStorageSync("isFirstLogin", false);
        },
        /**
         * 刷新
         */
        onRefresh() {
            this.page = 1;
            this.bannerList = [];
            this.list = [];
            this.getData();
        },
        /**
         * 网络请求
         */
        getData() {
            serviceIndex({
                page: this.page,
            }).then((res) => {
                this.total = res.data.service.total;
                const list = res.data.service.data;
                if (this.page === 1) {
                    this.bannerList = res.data.banner;
                    this.list = list;
                } else {
                    this.list = this.list.concat(list);
                }

                if (res.data.coupon) {
                    this.couponList.push(...res.data.coupon);
                    this.showCoupon = uni.getStorageSync("isFirstLogin");
                }
            });
        },
        // 立即领取
        onReceive(item) {
            receiveCoupon({ coupon_id: item.id })
                .then((res) => {
                    this.showToast = true;
                    this.showToastText = res.msg;
                    this.couponList = [];
                    this.getData();
                })
                .catch((err) => {
                    this.showToast = true;
                    this.showToastText = err.msg;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    --bottom-height: 120rpx;

    .authen-bg {
        height: 76rpx;
        background-color: white;
        padding: 0 15rpx;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0 20rpx;
        border-radius: 20rpx;
    }

    .banner {
        margin: 20rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        overflow: hidden;
    }

    .wrap-list {
        margin-top: 20rpx;
        width: 100%;
        overflow: hidden;
    }
}
.coupon {
    width: 620rpx;
    height: 888rpx;
    position: fixed;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: url("../../../static/static/technician/joinUs/couplayer.png") no-repeat;
    background-size: 100% 100%;

    .coupons {
        width: 570rpx;
        height: 58%;
        position: absolute;
        overflow-y: auto;
        top: 66%;
        left: 50%;
        transform: translate(-50%, -50%);
        .item {
            width: 570rpx;
            height: 152rpx;
            background: url("../../../static/static/technician/joinUs/coupon.png") no-repeat;
            background-size: 570rpx 152rpx;
            margin-bottom: 20rpx;
            .left {
                width: 24%;
                font-size: 52rpx;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                color: #e13221;
            }
            .left::before {
                content: "¥";
                font-size: 28rpx;
            }
            .center {
                flex: 1;
                margin-left: 6rpx;
                .title {
                    color: #e13221;
                    font-size: 30rpx;
                    font-weight: bold;
                }
                .sub {
                    width: max-content;
                    height: 36rpx;
                    line-height: 36rpx;
                    font-size: 24rpx;
                    margin: 10rpx 0;
                    background: #f87918;
                    border-radius: 6rpx;
                    color: white;
                    padding: 0 15rpx;
                    box-sizing: border-box;
                }
                .time {
                    font-size: 20rpx;
                    color: #999;
                }
            }
            .right {
                width: 22%;
                font-size: 30rpx;
                color: #e13221;
                .btn {
                    margin: 10rpx 0;
                    font-weight: bold;
                }
            }
        }

        .item:last-child {
            margin-bottom: 0;
        }
    }
}
.close {
    width: 52rpx;
    height: 52rpx;
    position: absolute;
    bottom: -5vh;
    left: 50%;
    transform: translateX(-50%);
    .img {
        width: 52rpx;
        height: 52rpx;
    }
}
.mark {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
}
.showToast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60rpx;
    background: #555555;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999899;
    .toast {
        color: white;
        font-size: 24rpx;
        padding: 0 20rpx;
    }
}
</style>
